<template>
  <div class="AddShop">
    <el-alert
      title="添加商品信息"
      type="info"
      show-icon
      center
    />

    <!-- 步骤条 -->
    <el-steps :active="active" align-center finish-status="success">
      <el-step title="基本信息" />
      <el-step title="商品参数" />
      <el-step title="商品属性" />
      <el-step title="商品图片" />
      <el-step title="商品内容" />
      <el-step title="完成" />
    </el-steps>

    <!-- Tabs标签页 -->
    <el-tabs :tab-position="'left'" :before-leave="change" @tab-click="OnClick">
      <el-tab-pane label="基本信息">
        <base-info @AddForm="addForm" @OnChange="shopSort=$event" />
      </el-tab-pane>
      <el-tab-pane lazy label="商品参数">
        <shop-parameter :shopsort="shopSort" @AddForm="addParameterForm" />
      </el-tab-pane>
      <el-tab-pane lazy label="商品属性">
        <shop-nature :shopsort="shopSort" @AddForm="addNatureForm" />
      </el-tab-pane>
      <el-tab-pane lazy label="商品图片">
        <shop-image @addImage="addImageForm" />
      </el-tab-pane>
      <el-tab-pane lazy label="商品内容">
        <quill-editor v-model="TextArea" />
        <el-button type="primary" style="margin:10px 0;" @click="AddShop">添加商品</el-button>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import BaseInfo from './component/BaseInfo.vue'
import ShopImage from './component/ShopImage.vue'
import ShopNature from './component/ShopNature.vue'
import ShopParameter from './component/ShopParameter.vue'
import { AddShopList } from '@/api/ShopList'
export default {
  name: 'AddShop',
  components: { BaseInfo, ShopParameter, ShopNature, ShopImage },
  data() {
    return {
      active: 0,
      shopSort: [],
      TextArea: '',
      goods_introduce: '',
      AddShopForm: {
        goods_name: '', //	商品名称
        goods_cat: '',	// 以为','分割的分类列表
        goods_price: 0, //	价格
        goods_number: 0, //	数量
        goods_weight: 0, //	重量
        goods_introduce: '', //	介绍
        pics: [], //	上传的图片临时路径（对象）
        attrs: []//	商品的参数（数组）
      }// 提交数据表单
    }
  },

  created() {

  },

  methods: {
    OnClick(e) {
      if (this.shopSort.length !== 3) {
        this.$message.error('请选择商品分类')
        return
      }
      this.active = e.index - 0
    },
    // 切换标签页
    change(activeName, oldActiveName) {
      if (oldActiveName === '0' && this.shopSort.length !== 3) {
        return false
      }
    },
    // 基础信息赋值给AddShopForm
    addForm(e) {
      const form = { ...e }
      form.goods_cat = form.goods_cat.toString()
      this.AddShopForm = form
    },
    // 合并商品参数数据
    addParameterForm(e) {
      this.$set(this.AddShopForm, 'attrs', e)
    },
    // 合并商品属性数据
    addNatureForm(e) {
      this.AddShopForm.attrs.push(...e)
    },
    // 合并图片路径
    addImageForm(e) {
      this.$set(this.AddShopForm, 'pics', e)
    },
    // 添加商品
    async AddShop() {
      this.$set(this.AddShopForm, 'goods_introduce', this.TextArea)
      const res = await AddShopList(this.AddShopForm)
      this.$message.success('添加商品成功')
      this.$router.back()
      console.log(res)
    }
  }
}
</script>

<style scoped lang='scss'>
.AddShop{
  padding: 20px;
  background-color: #fff;
}
.el-steps{
  margin: 20px 0;
}
::v-deep .ql-container{
	height:300px;
}
</style>
